<template>
  <div class="graph-log">
    <el-dialog v-model="dialogTableVisible" :title="props.dialogTitle" fullscreen>
      <el-card shadow="hover">
        <div style="height: 560px">
          <el-auto-resizer>
            <template #default="{ height, width }">
              <el-table-v2 :columns="columns" :data="tableModule.tableData" :width="width" :height="height" />
            </template>
          </el-auto-resizer>
        </div>
        <el-pagination :current-page="tableModule.currentPage" :page-size="tableModule.pageSize"
          :page-sizes="[10, 20, 30, 50]" :small="false" :disabled="false" :background="false"
          layout="total, sizes, prev, pager, next, jumper" :total="tableModule.count" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </el-card>
    </el-dialog>
  </div>
</template>
<script lang="tsx" setup>
import * as FormApi from '@/api/knowledge/area'
import type { Column } from 'element-plus'
import { ref, reactive } from 'vue'
import dayjs from "dayjs";
const props = defineProps({
  dialogTitle: String
})
const dialogTableVisible = ref(false)
// 表格数据
const tableModule = reactive({
  tableData: [], // 表格数据
  currentPage: 1, // 表格分页：当前页
  pageSize: 10, // 表格分页：每页显示条目个数
  count: 1 // 表格分页：总记录数
})
// 列表查询
const getTableData = async () => {
  const params = {
    pageNo: tableModule.currentPage,
    pageSize: tableModule.pageSize
  }
  FormApi.getGraphLogPage(params).then((res) => {
    tableModule.tableData = res.list
    tableModule.count = res.total
    // ElMessage({
    //   message: '查询成功',
    //   grouping: true,
    //   showClose: true,
    //   type: 'success'
    // })
  })
}
const open = async () => {
  dialogTableVisible.value = true
  getTableData()
}
defineExpose({ open })
// 分页：pageSize 改变时会触发
const handleSizeChange = (val: number) => {
  tableModule.pageSize = val
  getTableData()
}
// 分页：currentPage 改变时会触发
const handleCurrentChange = (val: number) => {
  tableModule.currentPage = val
  getTableData()
}
const formatDuration = (milliseconds) => {
  const seconds = Math.floor((milliseconds / 1000) % 60);
  const minutes = Math.floor((milliseconds / (1000 * 60)) % 60);
  const hours = Math.floor((milliseconds / (1000 * 60 * 60)) % 24);
  return [
    hours.toString().padStart(2, '0'),
    minutes.toString().padStart(2, '0'),
    seconds.toString().padStart(2, '0')
  ].join(':');
};
const columns: Column<object>[] = [
  {
    key: 'graphName',
    title: '知识库名称',
    dataKey: 'graphName',
    width: 210,
    align: 'center',
    cellRenderer: ({ cellData: graphName }) => <div>{graphName}</div>
  },
  // {
  //   key: 'graphType',
  //   title: '知识库类型',
  //   dataKey: 'graphType',
  //   width: 210,
  //   align: 'center',
  //   cellRenderer: ({ cellData: graphType }) => <div>{graphType}</div>
  // },
  // {
  //   key: 'graphName',
  //   title: '知识库简介',
  //   dataKey: 'graphName',
  //   width: 210,
  //   align: 'center',
  //   cellRenderer: ({ cellData: aa }) => <div>{aa}</div>
  // },
  {
    key: 'bookName',
    title: '图书资源',
    dataKey: 'bookName',
    width: 210,
    align: 'center',
    cellRenderer: ({ cellData: bookName }) => <div>{bookName}</div>,
  },
  {
    key: 'useTime',
    title: '使用时间',
    dataKey: 'useTime',
    width: 210,
    align: 'center',
    cellRenderer: ({ cellData: useTime }) => (
    <el-tooltip content={formatDuration(useTime)}>
      {<span class="flex items-center">{formatDuration(useTime)}</span>}
    </el-tooltip>
  )
  },
  // {
  //   key: "graphName",
  //   title: "知识库封面",
  //   dataKey: "graphName",
  //   width: 210,
  //   align: "center",
  //   cellRenderer: ({ cellData: graphName }) => <div>{graphName}</div>,
  // },
  // {
  //   key: "graphName",
  //   title: "实体数量",
  //   dataKey: "graphName",
  //   width: 210,
  //   align: "center",
  //   cellRenderer: ({ cellData: graphName }) => <div>{graphName}</div>,
  // },
  {
    key: 'createTime',
    title: '创建时间',
    dataKey: 'createTime',
    width: 210,
    align: 'center'
    // cellRenderer: ({ cellData: createTime }) => (
    //   <el-tooltip content={dayjs(createTime).format("YYYY/MM/DD")}>
    //     {<span class="flex items-center">{dayjs(createTime).format("YYYY/MM/DD")}</span>}
    //   </el-tooltip>
    // ),
  }
]
</script>
<style lang="scss" scoped>
// 覆盖默认overflow: auto样式，防止出现无效的滚动条
::v-deep(.el-dialog) {
  overflow: hidden !important;
}

.graph-log {}
</style>
